<template>
  <div class="member-order-page">
    <xtx-tabs v-model="activeName" @tab-click="handleClick">
      <xtx-tabs-panel v-for="item in orderStatus" :key="item.name" :name="item.name" :label="item.label">
        <!-- 每一个tab栏对应的订单列表数据 -->
        <div class="order-list">
          <!-- 网络慢时显示一个正在加载中的效果，提高用户体验度：解决白屏问题 -->
          <div v-if="loading" class="loading"></div>
          <!-- 如果没有数据，显示暂无数据 -->
          <div class="none" v-if="!loading && orderList.length === 0">暂无数据</div>
          <!-- 循环数据 -->
          <OrderItem v-for="order in orderList" :key="order.id" :order="order" @order-del="delOrderByOrderId"></OrderItem>
        </div>
      </xtx-tabs-panel>
    </xtx-tabs>
    <!-- 分页 -->
    <xtx-pagination @click="getOrderList()" v-if="total > orderParams.pageSize" @page-change="orderParams.page = $event"
      :total="total" :page-size="orderParams.pageSize" :current-page="orderParams.page" />
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
// 导入订单详情列表
import OrderItem from './components/order-item.vue'
// 导入配置文件
import { orderStatus, orderStatusNumber } from '@/config'
// 订单api
import { orderListApi, delteOrderApi } from '@/api/order'
import Message from '@/components/library/message'
import Confirm from '@/components/library/confirm'

// 删除订单
function delOrderByOrderId(orderId) {
  Confirm({ title: '删除订单提示', text: '您确定要删除该订单吗' }).then(() => {
    delteOrderApi([orderId]).then(() => {
      Message({ type: 'success', text: '删除成功' })
      // 删除数据
      orderList.value = orderList.value.filter(item => item.id !== orderId)
    }).catch(err => {
      Message({ type: 'error', text: err.response.data.message })
    })
  })
}

// 定义变量控制小兔子加载中的效果
const loading = ref(false)

const activeName = ref('all')
// 订单列表数据
const orderList = ref([])

// 订单筛选条件
const orderParams = reactive({
  page: 1,
  pageSize: 5,
  orderState: 0
})
// 总记录数
const total = ref(0)

// 首次调用获取全部数据
getOrderList()
// 根据分页和订单条件获取数据
async function getOrderList() {
  // 发起网络前显示加载中效果
  loading.value = true
  const { result } = await orderListApi(orderParams)
  // 数据加载完毕了，不显示加载效果
  loading.value = false
  orderList.value = result.items
  // 获取分页相关的数据
  total.value = result.counts
  orderParams.pageSize = result.pageSize
  orderParams.page = result.page
  // console.log(result)
}
// tab栏切换时的处理
function handleClick(active) {
  // 更新筛选条件
  orderParams.orderState = orderStatusNumber[active]
  // 重新从第1页获取数据
  orderParams.page = 1
  // 获取对应的数据
  getOrderList()
}
</script>

<style lang="less" scoped>
.order-list {
  background: #fff;
  padding: 20px;
  position: relative;
  min-height: 400px;
}

.loading {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: rgba(255, 255, 255, .9) url(../../../assets/images/loading.gif) no-repeat center;
}

.none {
  height: 400px;
  text-align: center;
  line-height: 400px;
  color: #999;
}
</style>